<template>
  <el-dialog
    title="充电区信息"
    :visible.sync="dialogVisible4"
    width="20%"
    :before-close="handleClose3"
  >
    <div>
      <li id="cgpInfo">编号:{{ this.id }}</li>
      <li id="cgpInfo">面积:{{ this.cgpArea }}</li>
      <li id="cgpInfo">状态:{{ this.cgpState }}</li>
      <li id="cgpInfo">充电位数:{{ this.cgpNum }}</li>
      <div v-show="num">
        <li id="cgpInfo">缓冲区面积:{{this.area}}</li>
        <li id="cgpInfo">覆盖人数:{{this.num}}</li>
      </div>
    </div>
    <el-input
      v-model="input"
      v-show="bufferFlag"
      placeholder="请输入缓冲距离(0-100米)"
      style="width: 195px; margin-top: 15px"
    ></el-input>

    <el-button v-show="bufferFlag" @click="buffer">确定</el-button>

    <span slot="footer" class="dialog-footer">
      <el-button-group>
        <el-button type="primary" @click="bufferFlag = true"
          >计算缓冲区</el-button
        >
        <el-button
          type="primary"
          @click="
            showBufferFalse()
            editfalse2();
            bufferFlag = false;
            num=0
          "
          >关闭</el-button
        >
        <el-button type="danger" @click="deleteV">删除</el-button>
      </el-button-group>
    </span>
  </el-dialog>
</template>

<script>
import pubsub from "pubsub-js";
import { mapMutations, mapState } from "vuex";

export default {
  name: "cgp_info",
  data() {
    return {
      area: "",
      input: "",
      bufferFlag: false,
      num: "",
      area:''
    };
  },

  props: ["id", "cgpArea", "cgpState", "cgpNum"],

  methods: {
    ...mapMutations([
      "edittrue2",
      "editfalse2",
      "showPathTrue",
      "showPathFalse",
      "showBufferTrue",
      "showBufferFalse",
    ]),
    handleClose3(done) {
      done();
    },

    deleteV() {
      this.$confirm("删除充电, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "get",
            url: `/deleteChargingPile?cpId=${this.id}`,
          }).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });

            window.location.reload();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    buffer() {
      this.showBufferTrue();

      setTimeout(() => {
        this.showBufferFalse()
        this.input = "";
      }, 500);
    },

    showFlagValidate() {
      const reg = /^(?:100|\d{1,2})$/;
      if (reg.test(this.input)) {
        this.bufferFlag = false;
      }
    },
  },

  computed: {
    ...mapState(["dialogVisible4"]),

    dialogVisible4: {
      get() {
        return this.$store.state.dialogVisible4;
      },
      set(val) {
        this.editfalse2();
      },
    },
  },

  mounted() {
    this.$nextTick(() => {
      // console.log(this.cpgPosition);
    });
    // this.bufferFlag=false
    pubsub.subscribe("getNum", (msg, data) => {
      // this.num = data;
      this.num=data.num
      this.area=data.area
    });
  },
};
</script>

<style>
#cgpInfo {
  margin-top: 15px;
}
</style>